<div class="row" *ngIf="personnel$ | async as personnel">
  <div class="g-top-button-group">
    <ng-container *ngIf="personnel.status === 0; else enableRef">
      <button class="btn btn-outline-danger" (click)="disable(personnel.id)">停用账户</button>
    </ng-container>
    <ng-template #enableRef>
      <button class="btn btn-outline-success" (click)="enable(personnel.id)">启用账户</button>
    </ng-template>
    <!-- <button class="btn btn-danger ml-3" (click)="delete(personnel)">删除账户</button> -->
  </div>
  <div class="col-xl-9">
    <m-info-card [personnel]="personnel" *ngIf="!editing; else edit">
      <m-button-icon
        icon="flaticon-refresh"
        color="secondary"
        class="mr-3"
        (click)="reset(personnel)"
      >
        重置密码
      </m-button-icon>
      <!-- <m-button-icon icon="flaticon-edit" (click)="editing = true">编辑人员</m-button-icon> -->
    </m-info-card>
    <ng-template #edit>
      <m-edit-card [personnel]="personnel" #editCard (cancel)="editing = false" (saved)="edited()">
      </m-edit-card>
    </ng-template>
    <!-- 	相关授权 -->
    <m-card>
      <div card-head>
        <div class="g-card-title">
          相关授权
        </div>
        <div>
          <span class="text-muted">区域数：</span>
          {{ (authTableRef?.result$ | async)?.total }}
        </div>
      </div>
      <m-api-data-table
        [dataSource]="permission$ | async"
        [center]="true"
        [selection]="permissionSelection"
        #authTableRef
      >
        <ng-container mDataTableColumn header="区域名称">
          <ng-template let-name="name">
            <td>{{ name }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="状态">
          <ng-template let-status="status_in_area">
            <td><m-enable-status-text [status]="status"></m-enable-status-text></td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="授权状态">
          <ng-template let-auth_status="auth_status">
            <td>
              <m-auth-status-text [status]="auth_status"></m-auth-status-text>
            </td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="终端授权">
          <ng-template let-pc_auth="pc_auth">
            <td>
              <m-auth-type [type]="pc_auth"></m-auth-type>
            </td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="终端配置">
          <ng-template let-pc_config="pc_config">
            <td>
              <m-auth-type [type]="pc_config"></m-auth-type>
            </td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="软件授权">
          <ng-template let-software_auth="software_auth">
            <td>
              <m-auth-type [type]="software_auth"></m-auth-type>
            </td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="编辑人">
          <ng-template let-editor="update_admin_username">
            <td>{{ editor }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="编辑时间">
          <ng-template let-updated_at="updated_at">
            <td>{{ updated_at | date }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="操作">
          <ng-template let-id="id" let-status="status_in_area" let-zone>
            <td>
              <button mat-icon-button [matMenuTriggerFor]="editMenu">
                <mat-icon>edit</mat-icon>
              </button>
              <mat-menu #editMenu [ngSwitch]="status">
                <button mat-menu-item (click)="permission(zone)">
                  定制权限
                </button>
                <button
                  *ngSwitchCase="Status.Enable"
                  mat-menu-item
                  (click)="authTableRef.refresh(authStatus(Status.Disable, id))"
                >
                  冻结
                </button>
                <button
                  *ngSwitchCase="Status.DisableInZone"
                  mat-menu-item
                  (click)="authTableRef.refresh(authStatus(Status.Enable, id))"
                >
                  激活
                </button>

                <button mat-menu-item (click)="authTableRef.refresh(deleteAuth(id))">删除</button>
              </mat-menu>
            </td>
          </ng-template>
        </ng-container>

        <button class="btn btn-secondary btn-sm" [matMenuTriggerFor]="batchEditMenu">
          批量操作
        </button>
        <mat-menu #batchEditMenu>
          <button mat-menu-item (click)="authTableRef.refresh(authStatus(Status.Enable))">
            激活
          </button>
          <button mat-menu-item (click)="authTableRef.refresh(authStatus(Status.Disable))">
            冻结
          </button>
          <button mat-menu-item (click)="authTableRef.refresh(deleteAuth())">删除</button>
        </mat-menu>
      </m-api-data-table>
    </m-card>
    <!-- 终端使用记录 -->
    <m-card>
      <div card-head class="d-flex align-items-center">
        <div class="g-card-title">
          终端使用记录
        </div>
      </div>
      <m-api-data-table
        [dataSource]="usedComputer$ | async"
        [defaultOption]="{ user_number: (personnel$ | async).id }"
      >
        <ng-container mDataTableColumn header="区域名称">
          <ng-template let-area_name="area_name">
            <td>{{ area_name }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="终端别名">
          <ng-template let-name="pc_name">
            <td>{{ name }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="IP地址">
          <ng-template let-ip="ip">
            <td>{{ ip }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="在线状态">
          <ng-template let-online="online">
            <td>
              <m-online-status-text [status]="online"></m-online-status-text>
            </td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="系统状态">
          <ng-template let-status="need_upgrade">
            <td>
              <m-update-status-text [status]="status"></m-update-status-text>
            </td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="软件更新">
          <ng-template let-status="need_upgrade">
            <td>
              <m-update-status-text [status]="status"></m-update-status-text>
            </td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="行为">
          <ng-template let-operation="operation">
            <td [ngSwitch]="operation">
              <ng-container *ngSwitchCase="1100">登录</ng-container>
              <ng-container *ngSwitchCase="1101">登出</ng-container>
            </td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="行为时间">
          <ng-template let-created_at="created_at">
            <td>{{ created_at | date }}</td>
          </ng-template>
        </ng-container>
      </m-api-data-table>
    </m-card>
    <!-- 软件使用记录 -->
    <m-card>
      <div card-head class="d-flex align-items-center">
        <div class="g-card-title">
          软件使用记录
        </div>
      </div>
      <m-api-data-table
        [dataSource]="usedSoftware"
        [defaultOption]="{ uid: (personnel$ | async).id }"
      >
        <ng-container mDataTableColumn header="区域名称">
          <ng-template let-area_name="area_name">
            <td>{{ area_name }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="终端别名">
          <ng-template let-name="pc_name">
            <td>{{ name }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="IP地址">
          <ng-template let-ip="pc_ip">
            <td>{{ ip }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="软件别名">
          <ng-template let-name="software_name">
            <td>{{ name }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="软件版本">
          <ng-template let-version="version">
            <td>{{ version }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="使用时间">
          <ng-template let-created_at="created_at">
            <td>{{ created_at | date }}</td>
          </ng-template>
        </ng-container>
      </m-api-data-table>
    </m-card>
  </div>
  <div class="col-xl-3">
    <div class="g-sticky">
      <m-history [type]="'personnel'"></m-history>
    </div>
  </div>
</div>
